﻿@inject IHttpContextAccessor _httpContext;
@{
    ViewData["Title"] = "语言版本管理";
    Layout = "~/Views/Shared/_ManageLayout.cshtml";
    var LookchemToken = _httpContext.HttpContext.Session.GetString(SystemConstConfig.LookchemLogin);
    var isOpt = !LookchemToken.IsNullOrWhiteSpace() || !AppSetting.IsNeedValid;
}
@section css{
    <style>
        .layui-table-cell {
            line-height: 35px;
        }
    </style>
}
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-form toolbar">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <button class="layui-btn icon-btn" lay-filter="formSubSearchTbBas" lay-submit>
                            <i class="layui-icon">&#xe615;</i>刷新
                        </button>
                        <a class="layui-btn icon-btn" id="addlanguage">
                            <i class="layui-icon">&#xe654;</i>新增语言版本
                        </a>
                    </div>
                </div>
            </div>

            <table class="layui-table" lay-even lay-skin="line" lay-size="lg" id="tableTbBas" lay-filter="tableTbBas"></table>
        </div>
    </div>
</div>
<!-- 表格操作列 -->
<script type="text/html" id="tableBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!-- 表单弹窗 -->
<script type="text/html" id="modelAuth">
    <form id="languageForm" lay-filter="languageForm" class="layui-form model-form">
        <input type="hidden" name="id" id="id" value="0">
        <div class="layui-form-item">
            <label class="layui-form-label">语言:</label>
            <div class="layui-input-block">
                <input name="language" placeholder="请输入语言" type="text" class="layui-input" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">语言路径:</label>
            <div class="layui-input-block">
                <input name="languageClass" lay-verify="required|languageClass" placeholder="请输入语言路径" type="text" class="layui-input" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否为默认语言:</label>
            <div class="layui-input-block">
                <input type="checkbox" name="isDefaultCheck" title="默认">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">图片(或者图标):</label>
            <div class="layui-upload-drag" id="uploadImg">
                <i class="layui-icon"></i>
                <p>点击上传，或将文件拖拽到此处</p>
                <div class="layui-hide" id="uploadDemoView">
                    <hr>
                    <img src="" alt="上传成功后渲染" style="max-height: 80px; max-height: 80px">
                </div>
            </div>
            <input name="languageImg" type="hidden">
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closePageDialog">取消</button>
            <button class="layui-btn" lay-filter="savelanguage" lay-submit>保存</button>
        </div>
    </form>
</script>

<script type="text/html" id="tableisDefault">
    <input type="checkbox" lay-filter="cklanguage" value="{{d.id}}" lay-skin="switch"
           lay-text="是|否" {{d.isDefault==1?'checked':''}} />
</script>
<!-- js部分 -->
<script>
    layui.use(['admin', 'layer', 'form', 'table', 'laydate', 'laytpl', 'upload'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var laydate = layui.laydate;
        var admin = layui.admin;
        var laytpl = layui.laytpl;
        var upload = layui.upload;
        form.verify({
            languageClass: function (value, item) { //value：表单的值、item：表单的DOM对象
                if (value.length > 2) {
                    return "语言路径最多只能有2个字符";
                }
            }
        });
        // 渲染表格
        var insTb = table.render({
            elem: '#tableTbBas',
            url: '/api/languageType',
            page: true,
            limit: 30,
            cellMinWidth: 100,
            cols: [[
                { field: 'language', align: 'center', edit: 'text', title: '语言' },
                { field: 'languageClass', align: 'center', edit: 'text', title: '语言目录' },
                {
                    field: 'languageImg', align: 'center', title: '国旗图标', templet: function (d) {
                        if (d.languageImg != null && d.languageImg != "") {
                            return "<img src=\"" + d.languageImg + "\"  style=\"max-height: 40px;max-height: 40px\">";
                        } else {
                            return "无图标"
                        }
                    }
                },
                {
                    align: 'center', title: '是否为默认语言', templet: '#tableisDefault'
                },
                { templet: '#tableBar', title: '操作', align: 'center', minWidth: 160 }
            ]]
        });

        //监听工具条
        table.on('tool(tableTbBas)', function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent == "edit") {
                @if (isOpt)
                {
                    <text>
                admin.open({
                    area: ["500px", "500px"],
                    type: 1,
                    title: '修改语言[' + data.language + ']',
                    content: $('#modelAuth').html(),
                    success: function (layero, dIndex) {
                        //拖拽上传
                        upload.render({
                            elem: '#uploadImg'
                            , url: '/api/upload/manageUpload' //改成您自己的上传接口
                            , done: function (res) {
                                if (res.success) {
                                    layer.msg(res.message, { icon: 1 });
                                    $('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.data.src);
                                    $("[name=languageImg]").val(res.data.src);
                                } else {
                                    layer.msg(res.message, { icon: 2 });
                                }
                            }
                        });
                        form.val('languageForm', data);  // 回显数据
                        if (data.isDefault == 1) {
                            $("[name=isDefaultCheck]").attr("checked", true);
                            form.render("checkbox");
                        }
                        if (data.languageImg != null && data.languageImg != '') {
                            $('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', data.languageImg);
                            $("[name=languageImg]").val(data.languageImg);
                        }
                        // 表单提交事件
                        form.on('submit(savelanguage)', function (rowData) {
                            if (rowData.field.isDefaultCheck) {
                                if (rowData.field.isDefaultCheck = "on") {
                                    rowData.field.isDefault = 1;
                                } else {
                                    rowData.field.isDefault = 0;
                                }
                            } else {
                                rowData.field.isDefault = 0;
                            }
                            layer.load(2);
                            $.ajax({
                                url: "/api/languageType/" + data.id,
                                type: 'put',
                                contentType: "application/json;charset=utf-8",
                                data: JSON.stringify(rowData.field),
                                dataType: "json",
                                complete: function (obj) {
                                    layer.closeAll('loading');
                                },
                                success: function (res) {
                                    if (res.success) {
                                        layer.msg(res.message, { icon: 1 });
                                        insTb.reload({}, 'data');
                                        layer.close(dIndex);
                                    } else {
                                        layer.msg(res.message, { icon: 2 });
                                    }
                                }
                            });
                            return false;
                        });
                    }
                });
                    </text>
                    }
                    else
                    {
                    <text>
                layer.msg("如需操作语言版本，请联系销售经理!", { icon: 4 });
                    </text>
                    }

                } else if (layEvent == "del") {
                @if (isOpt)
                {
                    <text>
                layer.confirm('确定要删除“[' + data.language + ']”吗,删除后，可能会出现网站信息不全？', {
                    skin: 'layui-layer-admin',
                    shade: .1
                }, function (i) {
                    layer.load(2);
                    $.ajax({
                        url: '/api/languageType/' + data.id,
                        type: 'delete',
                        async: true,
                        dataType: 'json',
                        complete: function (obj) {
                            layer.closeAll('loading');
                        },
                        success: function (result) {
                            layer.closeAll('loading');
                            if (result.success) {
                                layer.msg(result.message, { icon: 1 });
                                insTb.reload({}, 'data');
                            } else {
                                layer.msg(result.message, { icon: 2 });
                            }
                        }
                    });
                });
                    </text>
                }
                else
                {
                    <text>
                layer.msg("如需操作语言版本，请联系销售经理!", { icon: 4 });
                    </text>
                }

            }
        });
        //修改默认
        form.on('switch(cklanguage)', function (obj) {
            layer.load(2);
            var url = '/api/languageType/setDefault/' + obj.elem.value
            $.ajax({
                url: url,
                type: 'PUT',
                data: { isDefault: obj.elem.checked ? 1 : 0 },
                async: false,
                dataType: 'json',
                complete: function (obj) {
                    layer.closeAll('loading');
                },
                success: function (result) {
                    if (result.success) {
                        layer.msg(result.message, { icon: 1 });
                        insTb.reload();
                    } else {
                        layer.msg(result.message, { icon: 2 });
                        $(obj.elem).prop('checked', !obj.elem.checked);
                        form.render('checkbox');
                    }
                }
            });
        });
        // 搜索按钮点击事件
        form.on('submit(formSubSearchTbBas)', function (data) {
            insTb.reload({ where: data.field, page: { curr: 1 } }, 'data');
        });
        //新增任务
        $("#addlanguage").click(function () {

            @if (isOpt)
            {
                <text>
            admin.open({
                area: ["500px", "500px"],
                type: 1,
                title: '新语言',
                content: $('#modelAuth').html(),
                success: function (layero, dIndex) {
                    form.render();
                    //拖拽上传
                    upload.render({
                        elem: '#uploadImg'
                        , url: '/api/upload/manageUpload' //改成您自己的上传接口
                        , done: function (res) {
                            if (res.success) {
                                layer.msg(res.message, { icon: 1 });
                                $('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.data.src);
                                $("[name=languageImg]").val(res.data.src);
                            } else {
                                layer.msg(res.message, { icon: 2 });
                            }
                        }
                    });
                    // 表单提交事件
                    form.on('submit(savelanguage)', function (rowData) {
                        if (rowData.field.isDefaultCheck) {
                            if (rowData.field.isDefaultCheck = "on") {
                                rowData.field.isDefault = 1;
                            } else {
                                rowData.field.isDefault = 0;
                            }
                        } else {
                            rowData.field.isDefault = 0;
                        }
                        layer.load(2);
                        $.ajax({
                            url: '/api/languageType',
                            type: 'post',
                            contentType: "application/json;charset=utf-8",
                            data: JSON.stringify(rowData.field),
                            dataType: "json",
                            async: true,
                            complete: function (obj) {
                                layer.closeAll('loading');
                            },
                            success: function (res) {
                                if (res.success) {
                                    layer.msg(res.message, { icon: 1 });
                                    insTb.reload({}, 'data');
                                    layer.close(dIndex);
                                } else {
                                    layer.msg(res.message, { icon: 2 });
                                }
                            }
                        });
                        return false;
                    });
                }
            });
                </text>
            }
            else
            {
                <text>
            layer.msg("如需增加语言版本，请联系销售经理!", { icon: 4 });
                </text>
            }
        });
    });
</script>


